<template>
  <el-card class="box-card">
    <el-tag
      v-for="tag in tags"
      :key="tag.name"
      ref="tag"
      closable
      type=""
      size="small"
      :effect="tag.effect"
      @close="handleClose(tag)"
      @click="handleClick(tag)"
      @mouseenter.native="handleEnter"
    >
      {{ tag.name }}
    </el-tag>
  </el-card>
</template>

<script>
export default {
  name: 'NavTag',
  components: {},
  directives: {},
  props: {},
  data() {
    return {
      tags: [{ name: '首页', effect: 'dark', path: '/dashboard' }]
    }
  },
  computed: {},
  watch: {
    $route (newV, oldV) {
      console.log(newV)
      const { fullPath, meta: { title }} = newV
      console.log(fullPath, title)
      // const tags = this.tags
      let flag = true
      this.tags.forEach(t => {
        if (t.name === title) flag = false
        if (t.path !== fullPath) { t.effect = 'plain' } else { t.effect = 'dark' }
      })
      console.log(flag)
      if (flag) {
        this.tags.push({ name: title, effect: 'dark', path: fullPath })
      }
    }
  },
  async created() {},
  mounted() {},
  activated() {},
  updated() {},
  methods: {
    handleEnter (e) {
      // console.log(e.target)
      // console.log(this.$refs.tag)
      e.target.style.cursor = 'pointer'
    },
    handleClick (e) {
      console.log('点击标签', e)
      this.$router.push(e.path)
    },
    handleClose (e) {
      console.log(this.tags.includes(e))
      if (this.tags.length === 1) return
      this.tags.splice(this.tags.indexOf(e), 1)
      if (e.effect === 'dark') {
        console.log('dark')
        console.log(this.tags[this.tags.length - 1])
        this.$router.push(this.tags[this.tags.length - 1].path)
      }

      console.log(e)
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-card__body{
  padding: 5px 10px;
}
::v-deep .el-tag--small{
  margin: 0 3px;
}
.box-card{
  // cursor:pointer;
  margin: 10px 10px;
}
</style>
